<template>
  <div>
    <div class="g-btmbar">
      <div class="bg m-playbar"></div>
      <!-- 中间 -->
      <div class="g-btm-box">
        <!-- 左边上一首 暂停 下一首 -->
        <div class="g-btm-r">
          <a class="g-previous m-playbar icom" @click="prevSong"></a>
          <!-- 播放 -->
          <a
            class="g-suspend m-playbar icom"
            @click="suspend"
            :class="{ paly: suspends == false, palys: suspends == true }"
          ></a>
          <a class="g-next m-playbar icom" @click="nextSong"></a>
        </div>
        <!-- 左边图片 -->
        <div class="g-head">
          <img :src="picUrl != '' ? picUrl : oldpicUrl" alt="" />
        </div>

        <!--进度条大块 -->
        <div class="play" @mouseup="mouseupbar">
          <div class="play-text" v-if="username.ar">
            <a class="play1" @click="gosong(username.id)">{{
              username.name
            }}</a>
            <a class="play2" @click="goartist(username.ar[0].id)">{{
              username.ar[0].name
            }}</a>
          </div>
          <!-- 进度条 -->
          <div
            class="play-bar"
            @mousedown="mousedownbar"
            ref="reference"
            @mousemove="mousemovebar"
          >
            <audio
              :src="getMusicLyriclist.url"
              autoplay
              ref="audiomusic"
              @canplay="getDuration"
              @timeupdate="updateTime"
              @ended="playend"
            ></audio>
            <!-- 加载的进度条 -->
            <div class="rdy" style="width: 0px"></div>
            <!-- 进度条 -->
            <div class="cur" style="width: 1%" ref="curRef">
              <!-- 进度条小块 -->
              <span @mousedown="spandownbar">
                <!-- 进度条小块图标 -->
                <!-- <i></i> -->
              </span>
              <!-- <video :src="picUrl"></video> -->
            </div>
          </div>
          <span class="j-flag">
            <em>{{ newTime != "" ? newTime : "00:00" }}</em>
            <!-- <em>00:00</em> -->
            /{{ times != "" ? times : "00:00" }}
          </span>
        </div>

        <!-- 右边大块区域 -->
        <div class="open">
          <!-- 画中画 -->
          <a href="JavaScript:;" class="icn i-j"></a>
          <!-- 添加到歌单 -->
          <a href="JavaScript:;" class="link m-playbar i-j"></a>
          <!-- 分享 -->
          <a href="JavaScript:;" class="share m-playbar i-j"></a>
        </div>
        <!-- 循环等 -->
        <div class="ctrl">
          <div class="m-vue m-playbar">
            <div class="vbg m-playbar">
              <div class="curr m-playbar"></div>
              <span class="btn" style="top: 0"></span>
            </div>
          </div>
          <div class="m-vol">
            <a href="javascript:;" class="i-vol m-playbar i-j"></a>
            <a href="javascript:;" class="mode m-playbar i-j"></a>
          </div>
          <span class="m-add" @click="changadd">
            <a href="javascript:;" class="s-f3 m-playbar">{{
              newTrackList.length
            }}</a>
          </span>
        </div>
        <div class="m-box" style="display: none" ref="mBox">
          <div class="b-top">
            <!-- 左边 -->
            <div class="bt-l">
              <span class="bt-text">播放列表({{ newTrackList.length }})</span>
              <div class="collect-box">
                <div class="collect">
                  <a><span></span> 收藏全部</a>
                </div>
                <div class="collect">
                  <a><span class="icon2"></span>删除</a>
                </div>
              </div>
            </div>
            <!-- 右边 -->
            <div class="bt-r">
              <span>{{ username.name }}</span>
              <a @click="changadd">x</a>
            </div>
          </div>
          <div class="b-btn">
            <!-- 左边 -->
            <div class="mboxl">
              <div
                class="m-box-l"
                v-for="(trackList, index) in newTrackList"
                :key="index"
                :data-index="index"
                :data-songid="trackList.id"
              >
                <div
                  class="m-box-lt"
                  @click="
                    playsong(trackList.al.picUrl, trackList.id, trackList)
                  "
                >
                  <a>{{ trackList.name }}</a>
                </div>
                <div class="m-box-lr">
                  <a class="m-box-text" @click="goartist(trackList.ar[0].id)">{{
                    trackList.ar ? trackList.ar[0].name : ""
                  }}</a>
                  <span>{{ moment(trackList.dt).format("mm:ss") }}</span>
                  <a class="icon">icon</a>
                </div>
              </div>
            </div>
            <!-- <div class="b-gun1">
              <span></span>
            </div> -->
            <!-- 右边 -->
            <div class="m-box-r">
              <div class="m-box-r-btn" ref="lyricUL">
                <p
                  v-for="(item, i) in lyricsObjArr"
                  :key="item.uid"
                  :data-index="i"
                  ref="lyric"
                  :style="{ color: lyricIndex === i ? '#dbdbdc' : '#989898' }"
                >
                  {{ item.lyric }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右边区域 -->
      <div class="updn m-playbar">
        <div class="left m-playbar">
          <a href="javascript:;" class="btn m-playbar"></a>
        </div>
        <div class="right"></div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { mapState } from "vuex";
import throttle from "lodash/throttle";
export default {
  data() {
    return {
      picUrl: "",
      oldpicUrl: require("./image/default_album.jpg"),
      // url:''
      // 时间
      times: "",
      newTime: "",
      // 歌词
      lyricsObjArr: [],
      moment,
      isAdd: true,
      id: "",
      // 高亮
      lyricIndex: 0,
      username: {},
      // 默认显示暂停
      suspends: false,
      // 默认没点击
      isclick: false,
      newtimemist: "", //播放时间
    };
  },
  mounted() {
    this.singmusic();
    this.onesong();
    this.changesong();
  },

  methods: {
    // 默认发送请求第一条数据播放
    onesong() {
      let playlist = JSON.parse(localStorage.getItem("playlist"));
      this.addIdanImg();
      // console.log(playlist)
      if (playlist != null) {
        if (playlist[0]) {
          // this.suspends = true
          this.picUrl = playlist[0].al.picUrl;
          this.id = playlist[0].id;
          this.username = playlist[0];
          this.singmusics();
        } else {
          return;
        }
      }
    },
    // 添加到本地图片
    addIdanImg() {
      let playlist = JSON.parse(localStorage.getItem("playlist"));
      // 存储id和图片到本地存储 方便等一下上一首或者下一首
      if (playlist != null) {
        const playSongId = [];
        const playSongImg = [];
        playlist.forEach((item) => {
          let id = item.id;

          let picUrl = item.al.picUrl;
          playSongId.push(id);
          playSongImg.push(picUrl);
        });
        localStorage.setItem("playSongId", JSON.stringify(playSongId));
        localStorage.setItem("playSongImg", JSON.stringify(playSongImg));
      } else {
        return;
      }
    },

    // 获取时间总
    getDuration() {
      // console.log(this.$refs.audiomusic.duration); //此时可以获取到duration 获取歌曲长度
      let duration = this.$refs.audiomusic.duration;

      // 分
      let painth = parseInt(duration / 60);
      painth = painth < 10 ? "0" + painth : painth;
      // 秒
      let paints = ((duration % 60) + "").slice(0, 2);
      paints = paints < 10 ? "0" + paints : paints;
      // console.log(paints)
      this.times = painth + ":" + paints;
    },
    // 处理开始时间
    updateTime(e) {
      let duration = this.$refs.audiomusic.duration; //获取总长度
      const currentTime = e.target.currentTime; //获取audio当前播放时间
      // 计算播放到哪里
      if (this.isclick != true) {
        const newCurrentTime = (currentTime / duration) * 100 + "%";
        // 修改样式
        this.$refs.curRef.style.width = newCurrentTime;
      }

      let newh = parseInt(currentTime / 60);
      newh = newh < 10 ? "0" + newh : newh;
      // console.log(newh);
      let news = (currentTime % 60) + "";
      // console.log(news);
      news = news < 10 ? news.slice(0, 1) : news.slice(0, 2);
      news = news < 10 ? "0" + news : news;
      //  console.log("k"+ this.$refs.audiomusic.buffered.start(0))
      // console.log(news);
      this.newTime = newh + ":" + news;

      for (let i = 0; i < this.lyricsObjArr.length; i++) {
        if (currentTime > parseInt(this.lyricsObjArr[i].time)) {
          const index = this.$refs.lyric[i].dataset.index;
          if (i === parseInt(index)) {
            this.lyricIndex = i;
            this.$refs.lyricUL.style.transform = `translateY(${
              200 - 35 * (i + 1)
            }px)`;
          }
        }
      }
    },

    // 点击播放触发ondsong
    changesong() {
      // console.log()
      this.$bus.$on("changeOne", () => {
        this.suspends = true;
        let playlist = JSON.parse(localStorage.getItem("playlist"));
        console.log(playlist);
        this.addIdanImg();
        // 延迟调用默认播放第一首
        this.$nextTick(() => {
          this.onesong();
        });
      });
    },
    // 点击
    mousedownbar(e) {
      // 点击到左边视图的距离
      const oldLeft = e.clientX;
      // console.log(oldLeft)
      // 元素距离左边视图的距离
      const leftX = this.$refs.reference.getBoundingClientRect().left;
      // console.log(leftX)
      const newLeft = oldLeft - leftX;
      // console.log(newLeft)
      // // 求百分比
      const offsetwidth = this.$refs.reference.offsetWidth;
      // console.log(offsetwidth)
      const collagen = (newLeft / offsetwidth) * 100;
      this.$refs.curRef.style.width = collagen + "%";
      let duration = this.$refs.audiomusic.duration; //获取总长度
      this.newtimemist = (duration / 100) * collagen; //
      // console.log(newtimemist);
      const audio = this.$refs.audiomusic;
      audio.currentTime = this.newtimemist;
    },
    // 移动
    mousemovebar(e) {
      if (this.isclick) {
        // 点击到左边视图的距离
        const oldLeft = e.clientX;
        // console.log(oldLeft)
        // 元素距离左边视图的距离
        const leftX = this.$refs.reference.getBoundingClientRect().left;
        // console.log(leftX)
        const newLeft = oldLeft - leftX;
        // console.log(newLeft)
        // // 求百分比
        const offsetwidth = this.$refs.reference.offsetWidth;
        // console.log(offsetwidth)
        const collagen = (newLeft / offsetwidth) * 100;
        this.$refs.curRef.style.width = collagen + "%";
        let duration = this.$refs.audiomusic.duration; //获取总长度
        this.newtimemist = (duration / 100) * collagen; //
        // console.log(newtimemist);
        this.changenewtimemist()
      }
    },
    changenewtimemist:throttle(function () {
      const audio = this.$refs.audiomusic;
      audio.currentTime = this.newtimemist;
    },500),
    // 起来
    mouseupbar() {
      this.isclick = false;

      // this.mousedownbar()
    },
    // 小圆点
    spandownbar() {
      this.isclick = true;
    },
    // 点击播放键
    suspend() {
      let audio = this.$refs.audiomusic;
      // 暂停
      // console.log(this.$refs.audiomusic.paused);
      if (audio.paused) {
        // console.log(audio.paused)
        this.suspends = true;
        audio.play(); //播放
      } else {
        this.suspends = false;
        audio.pause(); //暂停
      }
    },
    // 点击切歌 传入id修改
    playsong(pigurl, id, pl) {
      // console.log(id)
      this.picUrl = pigurl;
      this.id = id;
      // console.log(pl)
      this.username = pl;
      this.singmusics();
    },
    // 上一首与下一首
    prevSong() {
      // 播放上一首歌曲
      // 我的思想是 本地存储的id拿出来匹配到索引 然后获取到下一个index的id
      // id
      const playSongId = JSON.parse(localStorage.getItem("playSongId"));
      // img
      let playlist = JSON.parse(localStorage.getItem("playlist"));
      const playSongImg = JSON.parse(localStorage.getItem("playSongImg"));

      console.log(playSongId);
      const index = playSongId.indexOf(this.id);
      console.log(index + "上一首");
      if (index > 0) {
        this.id = playSongId[index - 1];
        this.username = playlist[index - 1];
        this.picUrl = playSongImg[index - 1];
        this.singmusics();
      } else {
        return;
      }
    },
    nextSong() {
      const playSongId = JSON.parse(localStorage.getItem("playSongId"));
      let playlist = JSON.parse(localStorage.getItem("playlist"));
      // img
      const playSongImg = JSON.parse(localStorage.getItem("playSongImg"));

      console.log(playSongId);
      const index = playSongId.indexOf(this.id);
      console.log(index + "下一首");

      if (index <= playSongId.length) {
        this.id = playSongId[index + 1];
        this.username = playlist[index + 1];
        this.picUrl = playSongImg[index + 1];
        this.singmusics();
      } else {
        return;
      }
    },
    // 播放完毕触发
    playend() {
      // console.log("触发了");
      this.nextSong();
    },
    //外面传过来的获取音乐路径
    singmusic() {
      // picUrl:this.
      this.$bus.$on("singid", ({ ids, picUrl }) => {
        this.suspends = true;
        // console.log(ids, picUrl);
        this.picUrl = picUrl;
        this.id = ids;
        // 存储图片和id
        this.addIdanImg();
        // 获取url地址  reqMusicUrl
        // 必选参数 : id : 音乐 id
        // level: 播放音质等级, 分为 standard => 标准,higher => 较高, exhigh=>极高, lossless=>无损, hires=>Hi-Res
        // 例子： /song/url/v1?id=33894312&level=exhigh
        // console.log('触发了')
        try {
          // 获取音乐地址
          this.$store.dispatch("getsingmusic", {
            id: this.id,
            level: "higher",
          });

          //获取歌词
          this.getMusicLyric();
        } catch (error) {
          alert("获取地址失败");
        }
      });
    },
    // 本地获取的音乐路由
    singmusics() {
      try {
        this.$store.dispatch("getsingmusic", {
          id: this.id,
          level: "higher",
        });
        this.getMusicLyric();
      } catch (error) {
        alert("获取地址失败");
      }
    },
    // 获取歌词 reqMusicLyric
    async getMusicLyric() {
      const result = await this.$API.reqMusicLyric(this.id);
      console.log(result);
      if (result.code == 200) {
        // 保留数据
        const lyric = result.lrc.lyric;
        // 正则所有\n
        const regNewLine = /\n/;
        // 分隔所有\n 保留到lineArr
        const lineArr = lyric.split(regNewLine);
        // 正则表达式 匹配所有时间    [01:23.230]
        const regTime = /\[\d{2}:\d{2}.\d{2,3}\]/;
        // 遍历分隔后的数组
        lineArr.forEach((item) => {
          // 遍历数组  [00:00.000] 作词 : 代岳东/周振霆
          // console.log(item)
          if (item === "") return;
          const obj = {};
          // 每一项匹配正则
          const time = item.match(regTime);
          // 给obj添加一个lyric属性  切割】后面的文字去除空白 如果没有文字就返回空 有就去除空白
          obj.lyric =
            item.split("]")[1].trim() === "" ? " " : item.split("]")[1].trim();
          // console.log(lyric);
          // 如果有时间这一项 就返回格式化后的时间 没有就返回0
          obj.time = time
            ? this.formatLyricTime(time[0].slice(1, time[0].length - 1))
            : 0;
          // 生成随机id
          obj.uid = Math.random().toString().slice(-6);

          if (obj.lyric === "") {
            // console.log("这一行没有歌词");
            this.lyricsObjArr.push("\xa0");
          } else {
            //   // 有歌词就添加一项
            this.lyricsObjArr.push(obj);
          }
        });
      } else {
        alert("获取失败");
      }
    },
    // 时间
    formatLyricTime(time) {
      // 格式化歌词的时间 转换成 sss:ms
      const regMin = /.*:/;
      const regSec = /:.*\./;
      const regMs = /\./;
      // 取整 时间进行正则匹配  取两位
      const min = parseInt(time.match(regMin)[0].slice(0, 2));
      // 取整 时间进行正则匹配  取三
      let sec = parseInt(time.match(regSec)[0].slice(1, 3));
      const ms = time.slice(
        time.match(regMs).index + 1,
        time.match(regMs).index + 3
      );
      if (min !== 0) {
        sec += min * 60;
      }
      return Number(sec + "." + ms);
    },

    // 修改样式
    changadd() {
      if (this.isAdd) {
        this.isAdd = false;
        this.$refs.mBox.style.display = "block";
      } else {
        this.isAdd = true;
        this.$refs.mBox.style.display = "none";
      }
    },
    // 跳转歌手
    goartist(id) {
      this.$router.push(`/artist?id=${id}`);
    },
    // 跳转歌曲页
    gosong(id) {
      this.$router.push(`/song?ids=${id}`);
    },
  },

  computed: {
    ...mapState({
      newTrackList: (state) => {
        return state.Home.newTrackList || [];
      },
      getMusicLyriclist: (state) => {
        return state.Footer.getMusicLyric || {};
      },
    }),
  },
  created() {
    console.log("sass");
  },
};
</script>

<style lang="less" scoped>
.palys {
  background-position: 0px -165px;
}
.paly {
  background-position: 0 -204px;
}

// 背景图片
.m-playbar {
  background-image: url("~@/assets/image/playbar.png");
}

audio {
  margin-top: -50px;
}
// 图标公共样式
.i-j {
  width: 25px;
  height: 25px;
  // margin: 11px 2px 0 0;
  text-indent: -9999px;
}
.g-btmbar {
  position: relative;
  width: 100%;
  min-width: 1276px;
  .bg {
    height: 53px;
    zoom: 1;
    margin-right: 52px;
    background-position: 0 0;
    background-repeat: repeat-x;
    // position: absolute;
  }
  .icom {
    display: block;
    float: left;
    width: 28px;
    height: 28px;
    margin-right: 8px;
    margin-top: 5px;
    text-indent: -9999px;
  }
  .g-btm-box {
    height: 47px;
    position: absolute;
    align-items: center;
    display: flex;
    // background-color: aqua;
    width: 984px;
    top: 7px;
    right: 50%;
    margin-right: -492px;
    // 上一首和下一首
    .g-btm-r {
      width: 120px;
      margin-right: 10px;
      .g-previous {
        background-position: 0 -130px;
      }
      .g-suspend {
        width: 36px;
        height: 36px;
        margin-top: 0;
      }
      .g-next {
        background-position: 74px -130px;
      }
    }
    // 上一首和下一首的旁边的图标
    .g-head {
      width: 40px;
      margin-right: 10px;
      img {
        height: 34px;
        width: 34px;
      }
    }
    // 进度条
    .play {
      width: 580px;
      height: 100%;
      //   background-color: aqua;
      //   display: flex;
      position: relative;

      .play-text {
        height: 20px;
        position: absolute;
        display: flex;
        font-size: 12px;
        line-height: 20px;
        .play1 {
        }
        .play2 {
          margin-left: 10px;
        }
      }
      .play-bar {
        position: absolute;
        bottom: 7px;
        width: 493px;
        height: 9px;
        // display: flex;
        background-position: right 0;
        background-image: url("./image/statbar.png");
        .rdy {
          background-image: url("./image/statbar.png");
          position: absolute;
          top: 0px;
          bottom: 7px;
          width: 493px;
          height: 9px;
          background-position: right -30px;
        }
        .cur {
          position: absolute;
          top: 0px;
          bottom: 7px;
          width: 493px;
          height: 9px;
          background-position: right 0;
          background-image: url("./image/statbar.png");
          span {
            background: url("~@/assets/image/iconall.png");
            position: absolute;
            top: -8px;
            right: -13px;
            width: 22px;
            height: 24px;
            margin-left: -11px;
            background-position: 0 -250px;
          }
        }
      }
      .j-flag {
        em {
          font-style: normal;
        }
        right: 5px;
        top: 25px;
        position: absolute;
        font-size: 13px;
        color: #797979;
      }
    }
    // 三个图标
    .open {
      width: 87px;
      height: 100%;
      margin: 0 10px;
      display: flex;
      align-items: center;
      .i-j {
        width: 25px;
        height: 25px;
        // margin: 11px 2px 0 0;
        text-indent: -9999px;
      }
      .icn {
        background: url("./image/3.png") no-repeat 0 0;
      }
      .link {
        background-position: -88px -163px;
      }
      .share {
        background-position: -114px -163px;
      }
    }
    // 音乐循环列表
    .ctrl {
      height: 100%;
      width: 126px;
      position: relative;
      display: flex;
      .m-vue {
        position: absolute;
        top: -113px;
        left: -2px;
        clear: both;
        width: 32px;
        height: 113px;
        display: none;
        background-position: 302px -499px;
        .vbg {
          position: absolute;
          top: 11px;
          left: 14px;
          width: 4px;
          height: 93px;
          background-position: 302px -499px;
          .curr {
            top: auto;
            bottom: 4px;
            left: 0;
            background-position: -40px bottom;
            overflow: hidden;
            // background-image: url("~@/assets/image/iconall.png");
          }
          .btn {
            position: absolute;
            top: 0;
            left: -7px;
            display: block;
            width: 18px;
            height: 20px;
            background-position: -40px -250px;
            _background-position: 0 0;
            cursor: pointer;
            background-image: url("~@/assets/image/iconall.png");
          }
        }
      }
      .m-vol {
        position: absolute;
        display: flex;
        align-items: center;
        height: 100%;
        width: 60px;
        // display: inline;
        // top: -113px;
        // left: 9px;
        // clear: both;
        // width: 32px;
        // height: 113px;
        // background-color: aqua;
        .i-vol {
          background-position: -2px -248px;
        }
        .mode {
          background-position: -3px -344px;
        }
      }
      .m-add {
        position: absolute;
        width: 60px;
        height: 40px;
        line-height: 47px;
        display: flex;
        text-align: center;
        overflow: hidden;
        margin-left: 56px;
        .s-f3 {
          display: block;
          float: none;
          width: 38px;
          padding-left: 21px;
          background-position: -41px -58px;
        }
      }
    }
  }

  //updn
  .updn {
    .left {
      position: absolute;
      top: -14px;
      right: 0px;
      width: 52px;
      height: 67px;
      background-position: 0 -380px;
      .btn {
        display: block;
        width: 18px;
        height: 18px;
        margin: 6px 0 0 17px;
        background-position: -100px -380px;
      }
    }
  }
  // 大框
  .m-box {
    height: 300px;
    width: 986px;
    background-color: rgb(40, 40, 40);
    position: absolute;
    bottom: 48px;
    display: flex;
    flex-direction: column;
    .b-top {
      width: 100%;
      height: 40px;
      background-color: rgb(31, 31, 31);
      display: flex;
      .bt-l {
        display: flex;
        color: #fff;
        width: 550px;
        height: 40px;
        align-items: center;
        // flex-direction: column;
        justify-content: space-between;
        .bt-text {
          margin-left: 10px;
        }
        .collect-box {
          width: 30%;
          display: flex;
          .collect {
            color: #fff;
            display: flex;
            a {
              display: inline-block;
              margin-right: 10px;
              span {
                height: 15px;
                display: inline-block;
                // margin-top: 2px;
                top: 20px;
                line-height: 15px;
                background-image: url("~@/assets/image/playlist.png");
                width: 16px;
                background-position: -24px 0;
              }
              .icon2 {
                background-position: -51px 0;
              }
            }
          }
        }
      }
      .bt-r {
        color: #fff;
        text-align: center;
        width: 420px;
        line-height: 40px;
        position: relative;
        a {
          position: absolute;
          right: 10px;
        }
      }
    }
    .b-btn {
      display: flex;
      .mboxl {
        width: 558px;
        height: 260px;
        overflow-y: scroll; // -webkit-scrollbar
        overflow-x: hidden;
      }
      .mboxl&:-webkit-scrollbar {
        // display: none;
        height: 10px;
        width: 6px;
      }
      .mboxl&::-webkit-scrollbar-thumb {
        //滑轨上滑块
        background-color: #e78170 !important;
      }

      .b-gun1 {
        z-index: 2;
        width: 6px;
        height: 261px;
        background: #000;
        opacity: 0.5;
        position: relative;
        span {
          position: absolute;
          left: 0;
          top: 0px;
          width: 4px;
          border-radius: 5px;
          height: 100px;
          cursor: pointer;
          background: #868686;
          border: 1px solid #a6a6a6;
          opacity: 0.8;
        }
      }
      // ::-webkit-scrollbar{

      // }

      .m-box-l {
        width: 550px;
        height: 28px;
        background-color: rgb(41, 36, 37);
        display: flex;
        justify-content: space-between;
        .m-box-lt {
          color: rgb(155, 155, 155);
          margin-left: 30px;
        }
        .m-box-lr {
          display: flex;
          justify-content: space-between;
          width: 240px;
          color: rgb(155, 155, 155);
          .m-box-text {
            width: 74px;
            height: 21px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
          }
          span {
            // margin-left: 10px;
          }
          .icon {
            overflow: hidden;
            margin: 7px 0 0 10px;
            text-indent: -9999px;
            width: 14px;
            height: 21px;
            margin-right: 10px;
            margin-left: 0;
            background-position: -80px 0px;
            background-image: url("~@/assets/image/playlist.png");
          }
        }
      }
      .m-box-r {
        z-index: 3;
        width: 428px;
        height: 262px;
        background: rgb(64, 62, 62);
        // opacity: 0.01;
        overflow-y: scroll; // -webkit-scrollbar
        overflow-x: hidden;
        position: relative;

        .m-box-r-btn {
          width: 354px;
          height: 219px;
          margin: 15px auto;
          text-align: center;
          // background-color: #797979;
          z-index: 99;
          color: rgb(135, 134, 134);
          p {
            line-height: 35px;
          }
        }
      }
    }
  }
}
</style>
